import React, { useState } from 'react';
import style from './index.less';
import imgs1 from './img/3.png';
import { ArrowLeft } from '@react-vant/icons';
import { history } from 'umi';
export default function Index() {
  const [show, setshow] = useState(false);
  const [list, setlist] = useState(
    JSON.parse(localStorage.getItem('ak') || []),
  );
  console.log(list);

  return (
    <div>
      <div className={style.top}>
        <div className={style.you}>
          <img
            src="https://img.axureshop.com/8d/2f/30/8d2f3075c60b454382a8e5b016e47cf6/images/%E5%B7%B2%E5%AE%8C%E6%88%90%E8%AE%A2%E5%8D%95/u14570.png"
            alt=""
          />
        </div>
        <div className={style.tui}>
          <ArrowLeft
            fontSize={20}
            color="#6d6d6d"
            onClick={() => history.push('/qishou/wo')}
          />
        </div>
      </div>
      <div className={style.bei}>
        <div className={style.tou}>
          <div
            style={{
              color: show ? 'rgb(211, 210, 210)' : 'rgb(42, 202, 42)',
              fontWeight: show ? '' : 'bold',
            }}
            onClick={() => setshow(false)}
          >
            回收订单
          </div>
          <div
            style={{
              color: show ? 'rgb(42, 202, 42)' : 'rgb(211, 210, 210)',
              fontWeight: show ? 'bold' : '',
            }}
            onClick={() => setshow(true)}
          >
            送货订单
          </div>

          <span className={style.d2}>
            <div className={style.zou5}>
              <div className={style.kuang}>
                <div className={style.shang}>
                  <div className={style.zi}>订单手机: {list[0].dan}</div>
                </div>

                <div className={style.jian}>
                  <div className={style.di}>
                    <div>
                      <img
                        src="https://img.axureshop.com/8d/2f/30/8d2f3075c60b454382a8e5b016e47cf6/images/%E8%AE%A2%E5%8D%95/u13460.png"
                        alt=""
                      />
                    </div>

                    <div className={style.di1}> {list[0].city}</div>
                  </div>
                </div>
                <div className={style.bian}>
                  <b>TC_ZY</b> <span>189*****7687</span>
                </div>
                <div className={style.dan}>
                  <div className={style.dan1}>订单完成时间: {list[0].time}</div>
                  <div className={style.dan2}>
                    <img src={imgs1} alt="" />
                  </div>
                </div>
              </div>
            </div>
            <div className={style.you5}>
              <div className={style.kuang}>
                <div className={style.shang}>
                  <div className={style.zi}>订单编号: HS20191001001</div>
                </div>

                <div className={style.jian}>
                  <div className={style.di}>
                    <div>
                      <img
                        src="https://img.axureshop.com/8d/2f/30/8d2f3075c60b454382a8e5b016e47cf6/images/%E8%AE%A2%E5%8D%95/u13460.png"
                        alt=""
                      />
                    </div>

                    <div className={style.di1}> 中国矿产大学松园2号楼7102</div>
                  </div>
                </div>
                <div className={style.bian}>
                  <b>TC_ZY</b> <span>189*****7687</span>
                </div>
                <div className={style.dan}>
                  <div className={style.dan1}>
                    订单完成时间: 2019-9-30 13:52:10
                  </div>
                  <div className={style.dan2}>
                    <img src={imgs1} alt="" />
                  </div>
                </div>
              </div>
            </div>
          </span>
        </div>
      </div>
    </div>
  );
}
